import {
  PlusOutlined
} from '@ant-design/icons';
import './index.scss'
import { Button,Table,message,Form, Input, InputNumber, Popconfirm, Typography } from 'antd';


import React, { useEffect, useState } from 'react';
import qs from 'qs';

import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')



const originData = [];

  for (let i = 0; i < 100; i++) {
  originData.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

const EditableCell = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{
            margin: 0,
          }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`,
            },
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

function ClassifyList() {

    const dataPlus = [
    { "id":"1","classifyName": "张三", "number": "1", "updateTime": "2022-12-12 08:30:00" },
    { "id":"2","classifyName": "李四", "number": "2", "updateTime": "2022-12-12 09:30:00" },
    { "id":"3","classifyName": "王五", "number": "3", "updateTime": "2022-12-12 10:30:00" },
    { "id": "4", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "5", "classifyName": "赵六", "number": "5", "updateTime": "2022-12-12 11:30:00" },
    { "id": "6", "classifyName": "赵六", "number": "6", "updateTime": "2022-12-12 11:30:00" },
    { "id": "7", "classifyName": "赵六", "number": "7", "updateTime": "2022-12-12 11:30:00" },
    { "id": "8", "classifyName": "赵六", "number": "8", "updateTime": "2022-12-12 11:30:00" },
    { "id": "9", "classifyName": "赵六", "number": "9", "updateTime": "2022-12-12 11:30:00" },
    { "id": "10", "classifyName": "赵六", "number": "10", "updateTime": "2022-12-12 11:30:00" },
    { "id": "11", "classifyName": "赵六", "number": "11", "updateTime": "2022-12-12 11:30:00" },
    { "id": "12", "classifyName": "赵六", "number": "12", "updateTime": "2022-12-12 11:30:00" },
    { "id":"13","classifyName": "张三", "number": "13", "updateTime": "2022-12-12 08:30:00" },
    { "id":"14","classifyName": "李四", "number": "14", "updateTime": "2022-12-12 09:30:00" },
    { "id":"15","classifyName": "王五", "number": "15", "updateTime": "2022-12-12 10:30:00" },
    { "id": "16", "classifyName": "赵六", "number": "16", "updateTime": "2022-12-12 11:30:00" },
    { "id": "17", "classifyName": "赵六", "number": "17", "updateTime": "2022-12-12 11:30:00" },
    { "id": "18", "classifyName": "赵六", "number": "18", "updateTime": "2022-12-12 11:30:00" },
    { "id": "19", "classifyName": "赵六", "number": "19", "updateTime": "2022-12-12 11:30:00" },
    { "id": "20", "classifyName": "赵六", "number": "20", "updateTime": "2022-12-12 11:30:00" },
    { "id": "21", "classifyName": "赵六", "number": "21", "updateTime": "2022-12-12 11:30:00" },
    { "id": "22", "classifyName": "赵六", "number": "22", "updateTime": "2022-12-12 11:30:00" },
    { "id": "23", "classifyName": "赵六", "number": "23", "updateTime": "2022-12-12 11:30:00" },
    { "id": "24", "classifyName": "赵六", "number": "24", "updateTime": "2022-12-12 11:30:00" },
    { "id":"25","classifyName": "张三", "number": "25", "updateTime": "2022-12-12 08:30:00" },
    { "id":"26","classifyName": "李四", "number": "26", "updateTime": "2022-12-12 09:30:00" },
    { "id":"27","classifyName": "王五", "number": "27", "updateTime": "2022-12-12 10:30:00" },
    { "id": "28", "classifyName": "赵六", "number": "28", "updateTime": "2022-12-12 11:30:00" },
    { "id": "29", "classifyName": "赵六", "number": "29", "updateTime": "2022-12-12 11:30:00" },
    { "id": "30", "classifyName": "赵六", "number": "30", "updateTime": "2022-12-12 11:30:00" },
    { "id": "21", "classifyName": "赵六", "number": "31", "updateTime": "2022-12-12 11:30:00" },
    { "id": "22", "classifyName": "赵六", "number": "32", "updateTime": "2022-12-12 11:30:00" },
    { "id": "23", "classifyName": "赵六", "number": "33", "updateTime": "2022-12-12 11:30:00" },
    { "id": "24", "classifyName": "赵六", "number": "34", "updateTime": "2022-12-12 11:30:00" },
    { "id":"25","classifyName": "张三", "number": "35", "updateTime": "2022-12-12 08:30:00" },
    { "id":"26","classifyName": "李四", "number": "36", "updateTime": "2022-12-12 09:30:00" },
    { "id":"27","classifyName": "王五", "number": "37", "updateTime": "2022-12-12 10:30:00" },
    { "id": "28", "classifyName": "赵六", "number": "38", "updateTime": "2022-12-12 11:30:00" },
    { "id": "29", "classifyName": "赵六", "number": "39", "updateTime": "2022-12-12 11:30:00" },
    { "id": "30", "classifyName": "赵六", "number": "40", "updateTime": "2022-12-12 11:30:00" },
    { "id": "31", "classifyName": "赵六", "number": "41", "updateTime": "2022-12-12 11:30:00" },
    { "id": "32", "classifyName": "赵六", "number": "42", "updateTime": "2022-12-12 11:30:00" },
    { "id": "33", "classifyName": "赵六", "number": "43", "updateTime": "2022-12-12 11:30:00" },
    { "id": "34", "classifyName": "赵六", "number": "44", "updateTime": "2022-12-12 11:30:00" },
    { "id":"35","classifyName": "张三", "number": "45", "updateTime": "2022-12-12 08:30:00" },
    { "id":"36","classifyName": "李四", "number": "46", "updateTime": "2022-12-12 09:30:00" },
    { "id":"37","classifyName": "王五", "number": "47", "updateTime": "2022-12-12 10:30:00" },
    { "id": "38", "classifyName": "赵六", "number": "48", "updateTime": "2022-12-12 11:30:00" },
    { "id": "39", "classifyName": "赵六", "number": "49", "updateTime": "2022-12-12 11:30:00" },
    { "id": "40", "classifyName": "赵六", "number": "50", "updateTime": "2022-12-12 11:30:00" },
    { "id": "41", "classifyName": "赵六", "number": "51", "updateTime": "2022-12-12 11:30:00" },
    { "id": "42", "classifyName": "赵六", "number": "52", "updateTime": "2022-12-12 11:30:00" },
    { "id": "43", "classifyName": "赵六", "number": "53", "updateTime": "2022-12-12 11:30:00" },
    { "id": "44", "classifyName": "赵六", "number": "54", "updateTime": "2022-12-12 11:30:00" },
    { "id":"45","classifyName": "张三", "number": "55", "updateTime": "2022-12-12 08:30:00" },
    { "id":"46","classifyName": "李四", "number": "56", "updateTime": "2022-12-12 09:30:00" },
    { "id":"47","classifyName": "王五", "number": "3", "updateTime": "2022-12-12 10:30:00" },
    { "id": "48", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "49", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "50", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "51", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "52", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "53", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "54", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id":"55","classifyName": "张三", "number": "1", "updateTime": "2022-12-12 08:30:00" },
    { "id":"56","classifyName": "李四", "number": "2", "updateTime": "2022-12-12 09:30:00" },
    { "id":"57","classifyName": "王五", "number": "3", "updateTime": "2022-12-12 10:30:00" },
    { "id": "58", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "59", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    { "id": "60", "classifyName": "赵六", "number": "4", "updateTime": "2022-12-12 11:30:00" },
    
  ];

  // const columns = [
  //   {
  //     title: '',
  //     dataIndex: 'id',
  //     width: '5%',
  //   },
  //   {
  //     title: '分类名称',
  //     dataIndex: 'classifyName',
  //     width: '20%',
  //   },
  //   {
  //     title: '排序',
  //     dataIndex: 'number',
  //     sorter: true,
  //     width: '20%',
  //   },
  //   {
  //     title: '更新日期',
  //     sorter: true,
  //     dataIndex: 'updateTime',
  //   },
  //   {
  //     title: '操作',
  //     dataIndex: 'operation',
  //     render: () =>( 
  //         <>
  //             <Button type="link">
  //               编辑
  //             </Button>
  //             <Button type="link">
  //               删除
  //             </Button>
  //         </>
  //       )
  //   },
  // ];

  // const getRandomuserParams = (params) => ({
  //   results: params.pagination?.pageSize,
  //   page: params.pagination?.current,
  //   ...params,
  // });

  //   const [data, setData] = useState([]);
  //   const [loading, setLoading] = useState(false);
  //   const [pagination, setPagination] = useState({
  //     current: 1,//页数
  //     pageSize: 10,//显示条数
  //   });

  //   const fetchData = async(params = {}) =>{
  //     setLoading(false);
  //     setData(dataPlus);
  //     console.log(params)
  //     try {
  //         // await loginStore.login({
  //         //     userName: 'admin',
  //         //     password: 'admin'
  //         // });
  //     } catch (e) {
  //         message.error('网络请求超时，请检查网络状况！');
  //     }
  //   }
    
  //   useEffect(() => {
  //     fetchData({
  //       pagination,
  //     });
  //   }, []);

  //   const handleTableChange = (newPagination, filters, sorter) => {
  //     fetchData({
  //       sortField: sorter.field,
  //       sortOrder: sorter.order,
  //       pagination: newPagination,
  //       ...filters,
  //     });
  //   };

  const [form] = Form.useForm();
  const [data, setData] = useState(dataPlus);
  const [editingKey, setEditingKey] = useState('');

  const isEditing = (record) => record.key === editingKey;

  const edit = (record) => {
    form.setFieldsValue({
      name: '',
      age: '',
      address: '',
      ...record,
    });
    setEditingKey(record.key);
  };

  const cancel = () => {
    setEditingKey('');
  };

  const save = async (key) => {
    try {
      const row = await form.validateFields();
      const newData = [...data];
      const index = newData.findIndex((item) => key === item.key);

      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        setData(newData);
        setEditingKey('');
      } else {
        newData.push(row);
        setData(newData);
        setEditingKey('');
      }
    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }
  };

  const columns = [
  {
      title: '',
      dataIndex: 'id',
      width: '4%',
    },
    {
      title: '分类名称',
      //classifyName
      dataIndex: 'classifyName',
      width: '40%',
      editable: true,
    },
    {
      title: '排序',
      //number
      dataIndex: 'number',
      width: '20%',
      editable: true,
    },
    {
      title: '更新日期',
      //updateTime
      dataIndex: 'updateTime',
      width: '20%',
      editable: true,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '10%',
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record.key)}
              style={{
                marginRight: 8,
              }}
            >
              保存
            </Typography.Link>
            <Popconfirm title="是否放弃保存?" onConfirm={cancel}>
              <a>取消</a>
            </Popconfirm>
          </span>
        ) : (
            <>
          <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
            编辑
            </Typography.Link>
            <span className='shuxian'>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <Typography.Link disabled={editingKey !== ''} onClick="">
            删除
            </Typography.Link>
            </>
        );
      },
    },
  ];
  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        inputType: col.dataIndex === 'age' ? 'number' : 'text',
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

    return (
      <div className="div">
        <Button type="primary" icon={<PlusOutlined />} size="large" className='div-button'>
          新增
        </Button>
        {/* <Table
          locale={locale}
          columns={columns}
          rowKey={(record) => record.id}
          dataSource={data}
          pagination={pagination}
          loading={loading}
          onChange={handleTableChange}
          scroll={{
           y: 500,
           }}
        /> */}

    <Form form={form} component={false}>
          <Table
            components={{
              body: {
                cell: EditableCell,
              },
            }}
            bordered
            dataSource={data}
            columns={mergedColumns}
            rowClassName="editable-row"
            pagination={{
              onChange: cancel,
            }}
            scroll={{
            y: 500,
            }}
          />
        </Form>
      </div>
    )
  }

export default ClassifyList